 <template>
 	<view style="display: flex;flex-wrap: wrap">
 		<view v-for="(e, i) in  imgs" :key="e" class="img_box" @click.stop="onPreview(i)">
 			<uv-image width="100%" height="100%" :src="e" mode="aspectFill" lazy-load observe-lazy-load />
 		</view>
 	</view>
 </template>


 <script>
 	import {
 		deepClone
 	} from '@/util/utils'

 	export default {
 		props: {
 			imgs: {
 				type: Array,
 				default: () => {
 					return []
 				},
 			},
 			gap: {
 				type: Number,
 				default: 20,
 			},
 			rounded: {
 				type: Number,
 				default: 16,
 			},
 		},
 		data() {
 			return {

 			}
 		},


 		methods: {
 			onPreview(i) { 
 				const urls = deepClone(this.imgs)
 				uni.previewImage({
 					current: i,
 					urls,
 				})
 			}

 		}

 	}
 </script>

 <style lang="scss" scoped>
 	.img_box:nth-last-child(1),
 	.img_box:nth-last-child(2),
 	.img_box:nth-last-child(3) {
 		margin-bottom: 0 !important;
 	}

 	.img_box:nth-child(3n) {
 		margin-right: 0 !important;
 	}

 	.img_box {
 		width: calc((100% - 56rpx)/3);
 		height: 140rpx;
 		margin-right: 28rpx;
 		margin-bottom: 28rpx;
 		border-radius: 26rpx;
 		overflow: hidden;
 	}

 	.img_box image {
 		width: 100%;
 		height: 100%;
 	}
 </style>